<template>
  <div class="layout">
    <div class="flex-sc">
      <div class="mr12 h38 h38"><img class="hh100" src="@/assets/images/c1.png" /></div>
      <div class="line1 f18">{{v.name}}</div>
    </div>
    <div class="flex-sc f14 mt12">
      <div class="w50" style="color: #CECCDC;">位置</div>
      <div class="line2 flex1">{{v.instlPos}}</div>
    </div>
    <div class="flex-sc f14 mt12">
      <div class="w50" style="color: #CECCDC;">通信</div>
      <div class="w50 fw" :class="v.offline==0?'i21':'i6'">{{v.offline==0? '在线' : v.offline==1? '离线' : '故障'}}</div>
      <div class="w50" style="color: #CECCDC;">诊断</div>
      <div class="w50 fw" :class="v.isAlarm==1?'i8':'i21'">{{v.isAlarm==1? '异常' : '正常'}}</div>
    </div>
    <div class="absolute f18 flex-ec ww50" style="right: -5px; bottom: -5px" v-if="!isNull(v.values)">
      <div class="flex-col-cc p5 mlr3 i21" v-for="(vv, ii) in v.values.filter(a=>a.code != 'offline' && a.code != 'isAlarm' ).filter((a,b)=>b<2)" :key="ii">
        <span class="f12 mb5">{{vv.name}}</span>
        <span class="flex-cc">
          <span v-if="vv.code == 'offline'" class="fw" :class="v[vv.code] == 1?'i8':'i21'">
            {{v[vv.code] == 0? '在线' : v[vv.code] == 1? '离线' : '故障'}}
          </span>
          <span 
            v-else-if="vv.name.indexOf('水浸') != -1 || vv.name.indexOf('烟感') != -1"
            class="fw" :class="v[vv.code] == 1?'i8':'i21'">
            {{v[vv.code] == 0? '正常' : v[vv.code] == 1? '异常' : '/'}}
          </span>
          <span 
            v-else-if="vv.name.indexOf('分合') != -1 || vv.name.indexOf('开关') != -1" 
            class="fw" :class="v[vv.code] == 1?'i6':'i21'">
            {{v[vv.code] == 0? '分' : v[vv.code] == 1? '合' : '/'}}
          </span>
          <span 
            v-else-if="vv.name.indexOf('门') != -1" 
            class="fw" :class="v[vv.code] == 1?'i21':'i6'">
            {{v[vv.code] == 0? '关' : v[vv.code] == 1? '开' : '/'}}
          </span>
          <span class="fw" v-else>{{v[vv.code]?Math.round(v[vv.code]*100)/100:'/'}}</span>
          <span class="fw">{{vv.dw?vv.dw:''}}</span>
        </span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const props = defineProps({
    v: {
      type: [Object, Array],
      default: ()=>{return {}}
    },
  })
</script>

<style lang="scss">

</style>